<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card class="num-card" style="background-color: #1ab394;color: #FFFFFF;">
          <NumCard number="1234" unit="条" icon="el-icon-message-solid"></NumCard>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="num-card" style="background-color: #1c84c6;color: #FFFFFF">
          <NumCard icon="el-icon-s-promotion" number="32.75" unit="%"></NumCard>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="num-card" style="background-color: #ff4d4f;color: #FFFFFF">
          <NumCard icon="el-icon-s-flag" number="1123"></NumCard>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="num-card" style="background-color: #787be8;color: #FFFFFF">
          <NumCard icon="el-icon-s-check" number="98568" unit="天"></NumCard>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="num-card" style="background-color: #ffba00;color: #FFFFFF">
          <NumCard icon="el-icon-location" number="234" unit="个"></NumCard>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="num-card" style="background-color: #004d8c;color: #FFFFFF">
          <NumCard icon="el-icon-s-custom" number="123" unit="人"></NumCard>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="padding-top: 10px">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="never" :body-style="{height:'288px',padding:'0px'}">
            <div slot="header" class="clearfix">
              <span>个人待办</span>
              <el-button style="float: right; padding: 0px" type="text" @click="personPage()">更多</el-button>
            </div>
            <el-scrollbar>
            <div class="text item">
              <el-table :data="dataList"  stripe   style="width: 100%">
                <el-table-column fixed align="left" prop="name" show-overflow-tooltip label="任务名称" width="100"/>
                <el-table-column  align="left" prop="createTime" show-overflow-tooltip label="创建时间" width="170"/>
                <el-table-column  align="center" prop="isSuspended" label="流程状态" >
                  <template slot-scope="scope">
                    <el-tag type="success" effect="plain" v-if="scope.row.processStatus=='激活'">激活</el-tag>
                    <el-tag type="danger" effect="plain" v-else>挂起</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button size="mini" type="primary" style="width: 60px" icon="el-icon-sort" v-if="scope.row.isClaim===false"
                               @click="clickClaim(scope.row)">签收 &nbsp;</el-button>
                    <el-button size="mini" type="warning" style="width: 60px" icon="el-icon-sort" v-if="scope.row.isClaim===true"
                               @click="returnTask(scope.row)">归还 &nbsp;</el-button>
                    <el-button
                      v-if="scope.row.isClaim===null||scope.row.isClaim===true"
                      @click="clickTaskPop(scope.row)"
                      size="mini"
                      icon="el-icon-s-check"
                      type="primary"
                      style="width: 60px"
                    >办理</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            </el-scrollbar>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="never" :body-style="{height:'288px',padding:'0px'}">
            <div slot="header" class="clearfix">
              <span>最新通知</span>
              <el-button style="float: right; padding: 0px" type="text" @click="messagePage()">更多</el-button>
            </div>
            <el-scrollbar>
              <div class="text item">
                <el-table :data="messageList"   stripe   style="width: 100%">
                  <el-table-column label="标题" align="left" show-overflow-tooltip prop="title" width="130"/>
                  <el-table-column label="消息发送者" align="left" show-overflow-tooltip prop="sendName"/>
                  <el-table-column label="消息类型" align="center" prop="type" width="100" >
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.sys_message" :value="scope.row.type"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="阅读状态" align="center" prop="status" width="100" >
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.read_status" :key="scope.row.status" :value="scope.row.status"/>
                    </template>
                  </el-table-column>
                  <el-table-column width="20"/>
                </el-table>
              </div>
            </el-scrollbar>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="never" :body-style="{height:'288px',padding:'0px'}">
            <div slot="header" class="clearfix" >
              <span>消息统计</span>
            </div>
            <el-scrollbar>
              <div class="text item">
                <PieChart :style="{height:'300px'}" />
              </div>
            </el-scrollbar>
          </el-card>
        </div>
      </el-col>

    </el-row>

    <el-row style="padding-top: 10px">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="never" :body-style="{height:'288px',padding:'0px'}">
            <div slot="header" class="clearfix" >
              <span>曲线统计</span>
            </div>
            <el-scrollbar>
              <div class="text item">
                <LineChart  :height="'300px'" :chart-data="chartData" />
              </div>
            </el-scrollbar>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <!-- 通过 -->
    <verify ref="verifyRef" :taskId="taskId" :taskVariables="taskVariables"></verify>
    <approvalForm  ref="approvalForm" :businessKey = 'businessKey' :taskId = 'taskId' :parentTaskId = 'parentTaskId'
                   @refresh = 'refresh' :currProcessForm = 'currProcessForm' :processInstanceId = 'processInstanceId'/>
  </div>
</template>

<script>
import tag from '@/plugins/tab'
import api from '@/api/workflow/task';
import verify from "@/components/Process/Verify";
import approvalForm from "@/views/components/approvalForm";
import {listMessage} from "@/api/workflow/message";
import LineChart from "@/views/dashboard/LineChart";
import PieChart from "@/views/dashboard/PieChart";
import NumCard from "@/views/dashboard/NumCard";

export default {
  components: {
    NumCard,
    PieChart,
    LineChart,
    verify,
    approvalForm
  },
  name: "Index",
  dicts: ['read_status', 'sys_message'],
  data() {
    return {
      // 版本号
      version: "4.2.0",
      chart: null,
      // 表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        name: undefined
      },
      // 任务id
      taskId:undefined,
      taskVariables: undefined,
      processInstanceId: undefined,
      parentTaskId: undefined,
      businessKey: undefined, // 业务唯一标识
      visible: false,
      currProcessForm: '', //表单组件名称
      messageList: [],
      // 阅读时间时间范围
      daterangeReadTime: [],
      // 查询参数
      msgQueryParams: {
        pageNum: 1,
        pageSize: 5,
        sendId: undefined,
        recordId: undefined,
        type: undefined,
        status: undefined,
        messageContent: undefined,
        readTime: undefined
      },
      chartData:{
        expectedData:[1,1,2,3,5,8,13],
        actualData:[9,17,15,19,13,2,10]
      }
    };
  },
  mounted() {

  },
  created() {
    this.getList();
    this.getMsgList()
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    //分页
    getList() {
      this.loading = true;
      api.getTaskWaitByPage(this.queryParams).then(response => {
        this.dataList = response.rows;
      })
    },
    //刷新
    refresh() {
      this.getList()
    },
    //办理任务弹出层
    clickTaskPop(row) {
      this.businessKey = row.businessKey
      this.processInstanceId = row.processInstanceId
      this.taskId = row.id
      this.parentTaskId = row.parentTaskId
      if (row.actBusinessStatus) {
        if (row.actBusinessStatus.classFullName === 'com.ruoyi.demo.domain.BsLeave') {
          this.currProcessForm = 'leaveForm'
        } else if (row.actBusinessStatus.classFullName === 'com.ruoyi.demo.domain.BsTrip') {
          this.currProcessForm = 'tripsForm'
        }
        this.$refs.approvalForm.visible = true
      } else {
        this.$modal.msgError("业务不存在");
      }
    },

    /** 查询消息通知列表 */
    getMsgList() {
      this.loading = true;
      this.msgQueryParams.params = {};
      if (null != this.daterangeReadTime && '' != this.daterangeReadTime) {
        this.msgQueryParams.params["beginReadTime"] = this.daterangeReadTime[0];
        this.msgQueryParams.params["endReadTime"] = this.daterangeReadTime[1];
      }
      listMessage(this.msgQueryParams).then(response => {
        this.messageList = response.rows;
      });
    },
    personPage() {
      tag.openPage('待办任务', 'workflowPersonal/personalWaiting', {})
      let obj = {path: 'workflowPersonal/personalWaiting', meta: {title: '待办任务'}}
      tag.closePage(obj)
    },
    messagePage() {
      tag.openPage('消息通知', 'workflowPersonal/message', {})
      let obj = {path: 'workflowPersonal/message', meta: {title: '消息通知'}}
      tag.closePage(obj)
    },
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

}
// 滚动条大小设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  /*纵向滚动条*/
  width: 5px;
  /*横向滚动条*/
  height: 5px;
}
// 滚动条滑块样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #bfbfc0;
  border-radius: 5px;
}
// 滚动条背景样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background: none;
}
// 表格横向和纵向滚动条对顶角样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner {
  background-color: #111;
}
// 去除滚动条上方多余显示
::v-deep .el-table__header .has-gutter th.gutter {
  display: none !important;
}
::v-deep .el-table__body {
  width: calc(100% + 24px) !important;
}
::v-deep .el-table__header {
  width: calc(100% + 24px) !important;
}
.num-card{
  height: 120px;
}

</style>

